<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="cardList">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="gettableData">
            <el-button slot="append" icon="el-icon-search" @click="gettableData"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="addDialog=true">添加用户</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%" border class="table" stripe>
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" width="180" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="email" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column label="状态" prop="address" align="center" width="180">
          <slot slot-scope="scope">
            <el-switch v-model="scope.row.toggle" @change="userState(scope.row)"></el-switch>
          </slot>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <slot slot-scope="scope">
            <el-row justify="center">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :xs="8"
                @click="editShow(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :xs="8"
                @click="deleteUser(scope.row.id)"
              ></el-button>
              <el-tooltip content="分配权限" placement="top" :xs="8">
                <el-button type="warning" icon="el-icon-s-help" size="mini"></el-button>
              </el-tooltip>
            </el-row>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        class="page"
      ></el-pagination>
    </el-card>

    <el-dialog title="添加用户" :visible.sync="addDialog" width="40%" @close="addDialogClose">
      <el-form :model="addForms" :rules="addRules" ref="addForm" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="addForms.name" type="text" prop="name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForms.email" prop="email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="addForms.address" prop="address"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-input v-model="addForms.date" prop="date"></el-input>
        </el-form-item>
      </el-form>
      <!--腿部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!--修改用户信息-->
    <el-dialog
      title="修改用户"
      :visible.sync="editUserState"
      ref="editFrom"
      width="40%"
      @close="editDialogClose"
    >
      <el-form :model="userInfo" ref="userInfo" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userInfo.name" type="text" prop="name" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userInfo.email" prop="email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="userInfo.address" prop="address"></el-input>
        </el-form-item>
      </el-form>
      <!--腿部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserState = false">取 消</el-button>
        <el-button type="primary" @click="editUserState = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.gettableData();
  },
  data() {
    return {
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2,
        query: ""
      },
      tableData: [],
      addDialog: false,
      addForms: {
        id: Math.random() * 100,
        name: "",
        email: "",
        address: "",
        date: "",
        toggle: true
      },
      addRules: {
        name: [
          { required: true, message: "请输入用户", trigger: "blur" },
          { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
          { min: 6, max: 25, message: "长度在 6到 25 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur"
          }
        ],
        date: [
          {
            required: true,
            message: "请选择日期",
            trigger: "blur"
          }
        ]
      },
      editUserState: false,
      userInfo: {}
    };
  },
  methods: {
    gettableData() {
      this.tableData = [
        {
          id: 11,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          toggle: true,
          email: "1097387898@qq.com"
        },
        {
          id: 12,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          toggle: false,
          email: "1097387898@qq.com"
        },
        {
          id: 13,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          toggle: true,
          email: "1097387898@qq.com"
        },
        {
          id: 14,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          toggle: false,
          email: "1097387898@qq.com"
        }
      ];
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
    },
    handleCurrentChange(newpage) {
      console.log(`当前页: ${newpage}`);
    },
    userState(data) {
      const num = Math.random() * 10;
      if (num > 3) {
        this.Message({
          message: "切换成功转态为" + data.toggle,
          type: "success",
          duration: 1500
        });
      } else {
        data.toggle = !data.toggle;
        this.Message({
          message: "切换失败",
          type: "error",
          duration: 1500
        });
      }
    },
    addDialogClose() {
      this.$refs.addForm.resetFields();
    },
    addUser() {
      this.$refs.addForm.validate(flag => {
        if (!flag) {
          return;
        }
        this.tableData.push(this.addForms);
        this.addDialog = false;
        this.Message({
          message: "添加用户成功",
          type: "success",
          duration: 1500
        });
      });
    },
    editShow(data) {
      this.editUserState = true;
      this.userInfo = data;
    },
    deleteUser(id) {
      console.log(id);
      for (let i = 0; i < this.tableData.length; i++) {
        if (id == this.tableData[i].id) {
          this.tableData.splice(i, 1);
          return;
        }
      }
    },
    editDialogClose() {
      this.$refs.editFrom.resetFields();
    }
  }
};
</script>
<style scoped>

.cardList {
  margin-top: 15px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.table {
  margin-top: 10px;
  text-align: center;
}
.page {
  margin-top: 15px;
}
</style>